import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { GoodsService } from '@core/routes-services/goods.service';
import { GoodsClassService } from '@core/routes-services/goods-class.service';
import { UploadFileUtilService } from '@core/routes-services/upload-file-util.service';
import { SysParamService } from '@core/routes-services/sys-param.service';
import { QCLOUD_DOMAIN } from '../../../constant/config';

@Component({
  selector: 'app-goods-sort',
  templateUrl: './goods-sort.component.html',
  styles: [`
    img {
      cursor: move;
    }

    .main {
      width: 750px;
      margin: 0 auto;
      background-color: #eee;
      border: 1px solid red;
    }

    .top {
      width: 100%;
      height: 360px;
      display: flex;
    }

    .top > div {
      width: 100%;
      position: relative;
    }

    .txt-size {
      width: 100%;
      position: absolute !important;
      top: 1px;
      left: 0;
      text-align: center;
      height: 30px !important;
      background-color: #fff;
      opacity: 0.8;
      line-height: 30px;
    }

    .txt {
      width: 100%;
      position: absolute !important;
      bottom: 0;
      left: 0;
      text-align: center;
      height: 33px !important;
      background-color: #bbb;
      opacity: 0.8;
      line-height: 33px;
    }

    .top img {
      width: 100%;
      height: 100%;
    }

    .top-item {
      position: relative;

    }

    .top-item div {
      width: 50%;
      height: 50%;
      position: absolute;
    }

    .top-item > div:nth-child(1) {
      width: 49.9%;
      height: 100% !important;
      top: 0;
      left: 0;
    }

    .top-item > div:nth-child(2) {
      top: 0;
      right: 0;
    }

    .top-item > div:nth-child(3) {
      bottom: 0;
      right: 0;
    }

    .top-item > div > div {
      width: 100%;
    }

    .recommend {
      text-align: center;
    }

    .recommend h2 {
      color: #333;
    }

    .recommend h2 span {
      color: red;
      padding: 0 15px;
    }

    .img-big {
      width: 100% !important;
      height: 350px !important;
      background-color: white;
      margin-bottom: 8px;
      position: relative;
    }

    .recom-xq {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .recom-xq section {
      width: 49.5%;
      height: 290px;
      background-color: white;
      margin-bottom: 1%;
      text-align: center;
    }

    section div {
      width: 100%;
      height: calc(100% - 50px);
    }

    section p {
      text-align: center;
      background-color: #ddd;
      height: 50px;
      opacity: 0.8;
      line-height: 50px;
    }

    .recom-xq section img {
      width: 100%;
      height: 100%;
    }
  `],
})
export class GoodsSortComponent implements OnInit {


  /**
   * 分类对象 内包含 商品list
   */
  qcloudDomain = QCLOUD_DOMAIN;
  isLoading:boolean = true;
  typeVoList: any [] = [];
  miniToMarketing:any = {};
  constructor(private message: NzMessageService,
              private uploadFileUtilService: UploadFileUtilService,
              private sysParamService:SysParamService,
              private goodsService: GoodsService,
              private goodsClassService: GoodsClassService) {
  }

  ngOnInit() {
    this.initTypeOptions();
  }

  initTypeOptions() {
    this.isLoading = true;
    this.goodsClassService.getAllGoodsClass().then((res) => {
      if (res.status.toString().startsWith('20')) {
        this.typeVoList = res.data.goodsClassList;
        this.miniToMarketing = res.data.miniToMarketing;
        console.log(res);
      } else {
        this.message.warning(res.message);
      }
      this.isLoading = false;
    }, error => {
      this.message.error(error.message ? error.message : error.error);
      this.isLoading = false;
    });
  }


  upCompany: any;
  upTypeVo: any;
  downCompany: any;
  downTypeVo: any;

  imgmousedown(e, typeVo, company) {
    this.downTypeVo = typeVo;
    this.downCompany = company;
    console.log('down==========' + company.id);
    //防止浏览器默认行为(W3C)
    if (e && e.preventDefault) {
      e.preventDefault();
    }
    //IE中组织浏览器行为
    else {
      window.event.returnValue = false;
      return false;
    }
  }

  imgmouseup(typeVo, company) {
    let that = this;
    this.upTypeVo = typeVo;
    this.upCompany = company;
    console.log('up==========' + company.id);
    // 这里为排序方式 这里用的是按下鼠标图片和抬起鼠标图片相互替换
    let downimgnum = 0;
    let upimgnum = 0;
    if (this.downCompany.id == this.upCompany.id) {
      return;
    }

    if (this.upTypeVo.id == -1) {
      // 有商品要换入置顶的列表中
      if (this.downTypeVo.id == -1) {
        // 换入的那个商品也是置顶列表中的  即为置顶列表中 商品换 置顶排序号
        this.goodsService.exchangeTopNum(this.upCompany.id, this.downCompany.id).then((res) => {
          if (res.status.toString().startsWith('20')) {
            this.message.success('设置成功');
            this.initTypeOptions();
          } else {
            this.message.warning(res.message);
          }
        }, error => {
          this.message.error(error.message ? error.message : error.error);
        });
      } else {
        // 换入的那个商品不是置顶列表中的  即为不在置顶列表中的替换原置顶列表中的某个
        let index = this.upTypeVo.goodsList.findIndex((r) => r.id == that.downCompany.id);
        if (index >= 0) {
          this.message.warning('顶部商品列表中已包含您选择的商品，不要重复添加');
          return;
        }
        this.goodsService.setTopNum(this.downCompany.id, {
          topNum: this.upCompany.topNum,
          originId: this.upCompany.id,
        }).then((res) => {
          if (res.status.toString().startsWith('20')) {
            this.message.success('设置成功');
            this.initTypeOptions();
          } else {
            this.message.warning(res.message);
          }
        }, error => {
          this.message.error(error.message ? error.message : error.error);
        });
      }
    } else {
      // 其他
      if (this.upTypeVo.id != this.downTypeVo.id) {
        this.message.warning('不同类型商品不能交换位置');
        return;
      }
      this.goodsService.exchangeSortNum(this.upCompany.id, this.downCompany.id).then((res) => {
        if (res.status.toString().startsWith('20')) {
          this.message.success('设置成功');
          this.initTypeOptions();
        } else {
          this.message.warning(res.message);
        }
      }, error => {
        this.message.error(error.message ? error.message : error.error);
      });
    }
  }


  replaceImg() {
    document.getElementById("replace-img-btn").click();
  }
  toReplace(event: any) {
    // console.log(this)
    let $doc = document.getElementById("replace-img-btn");
    let $this = this;
    let files = event.target.files;
    for (let i = 0; i < files.length; i++) {// only one
      let file: any = files[i];
      this.uploadFileUtilService.uploadFile(file).then((resp: any) => {
        if (resp.status == 200) {
          this.miniToMarketing.value = $this.qcloudDomain + resp.data;
          this.sysParamService.saveOrUpdateEntity(this.miniToMarketing).then((res) => {
            if (res.status.toString().startsWith('20')) {
              this.message.success('修改成功');
            } else {
              this.message.warning(res.message);
            }
          }, (error) => {
            console.error('保存出错：', error);
            this.message.error(error.message ? error.message : error.error);
          });
        } else {
          $this.message.warning(resp.message);
        }
        $doc.setAttribute('type', 'text');
        $doc.setAttribute('type', 'file');
      }, error => {
        console.log('上传文件出错');
        $doc.setAttribute('type', 'text');
        $doc.setAttribute('type', 'file');
        $this.message.warning('上传文件出错请重新选择上传！');
      });
    }
  }
}
